<template>
  <el-card>
    <div style="padding: 30px 30px 30px 150px; width: 60vw">
      <PlusForm
        v-model="formValues"
        style="max-width: 600px"
        label-width="auto"
        label-position="top"
        size="large"
        :columns="columns"
        :rules="rules"
        @submit="formSubmit"
      />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { type Ref, ref, computed, h, Fragment } from "vue";
import type { PlusColumn, FieldValues, OptionsRow } from "plus-pro-components";
import { ElUpload, ElButton, ElAvatar } from "element-plus";
import { getToken, formatToken } from "@/utils/auth";
import { message } from "@/utils/message";
import { useUserStoreHook } from "@/store/modules/user";
import { getProfile, updateProfile } from "@/api/zhaoyuan";
import { storageLocal } from "@pureadmin/utils";
import { userKey } from "@/utils/auth";
const { token } = getToken();

const state = ref<FieldValues>({
  status: "0",
  name: "",
  rate: 4,
  progress: 100,
  switch: true,
  time: new Date().toString(),
  endTime: [],
  img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
});

const rules = {
  name: [
    {
      required: true,
      message: "请输入名称"
    }
  ],
  tag: [
    {
      required: true,
      message: "请输入标签"
    }
  ]
};

const columns: PlusColumn[] = [
  {
    label: "头像",
    prop: "avatarUrl",
    width: 100,
    valueType: "img",
    renderField(value, onChange) {
      return h(Fragment, [
        h("div", {}, [
          h(ElAvatar as any, {
            size: 80,
            src: value,
            previewSrcList: [value]
          }),
          h(
            ElUpload,
            {
              action: "api/api/document",
              multiple: false,
              headers: {
                Authorization: formatToken(token)
              },
              onSuccess: (response, file) => {
                console.log("上传成功", response, file);
                onChange(response.url);
              },
              onError: (error, file) => {
                message("上传失败！", { type: "error" });
              }
            },
            () => h(ElButton, () => "点击上传")
          )
        ])
      ]);
    }
  },
  {
    label: "真实姓名",
    prop: "fullName"
  },
  {
    label: "邮箱",
    prop: "email"
  },
  {
    label: "手机号",
    prop: "phone"
  },
  {
    label: "身份证号",
    prop: "identityId"
  },
  {
    label: "个性签名",
    prop: "bio",
    valueType: "textarea",
    fieldProps: {
      maxlength: 500,
      showWordLimit: true,
      autosize: { minRows: 2, maxRows: 10 }
    }
  }
];
const formValues = ref<FieldValues>({
  fullName: "",
  avatarUrl: "",
  photoUrl: "",
  bio: "",
  email: "",
  phone: "",
  name: "",
  identityId: ""
});

getProfile().then(res => {
  formValues.value = res.profile;
});

const formSubmit = () => {
  updateProfile(formValues.value).then(res => {
    message("更新成功", { type: "success" });
    useUserStoreHook().SET_USERINFO(res);
    useUserStoreHook().SET_AVATAR(res.avatarUrl);
    useUserStoreHook().SET_NICKNAME(res.name);
    useUserStoreHook().SET_USERNAME(res.username);
    storageLocal().setItem(userKey, {
      avatar: res.avatarUrl,
      username: res.username,
      nickname: res.name
    });
  });
};
</script>
